<template>
  <view class="panel-box">
    <image :src="showData.imageUrl" mode="widthFix"></image>
    <view class="info-box">
      <view class="distance-box" v-if="showData.distance">
        <text class="iconfont icon-weibiaoti--25"></text>
        <text class="distance-num">{{ showData.distance }}</text>
      </view>
      <view class="title">
        <text class="bao-you">包邮</text>
        <text>{{ showData.title }}</text>
      </view>
      <view class="tag-item tag-style" v-if="showData.keyTagText">{{
        showData.keyTagText
      }}</view>
      <view class="tag-item">{{ showData.productDes }}</view>
      <view class="tag-item fa-bu" v-if="showData.timeTagText">
        <text class="iconfont icon-weibiaoti--15"></text>
        {{ showData.timeTagText }}</view
      >
      <view class="price-box">
        <text class="rmb">¥</text>
        <text class="price">{{ showData.price }}</text>
        <text class="price-des">{{ showData.priceDes }}</text>

        <text class="payment-amount">{{ showData.want }}</text>
      </view>
      <view class="other-tag" v-if="showData.logistics.length">
        <text
          class="tag-red"
          v-for="(l, index) in showData.logistics"
          :key="index"
        >
          {{ l }}</text
        >
      </view>
      <view class="seller-info">
        <view class="user-img">
          <image :src="showData.imageUrl" mode="aspectFill"></image>
        </view>
        <text class="seller-location">{{ showData.location }}</text>
        <text class="seller-credit" v-if="showData.creditDes">{{
          showData.creditDes
        }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "panel003",
  props: {
    showData: {
      type: Object,
      default: () => {
        return {
          id: 7,
          title: "出气动公路车：Trek Madone SL6 Gen",
          productDes: "几乎全新 | TREK/崔克",
          price: "2.99万",
          location: "北京",
          description:
            "出气动公路车：Trek Madone SL6 Gen 7 ( 7代马东SL6)  北京本地自取 | 黄金尺码54 | 升级原厂一体把 | 骑极少 | 29999不议价  【核心亮点】 *   **顶级品牌：** Madone SL6 Gen 7，崔克气动公路车架，性能无需多言。 *   **黄金尺码5...",
          imageUrl: "/static/dataImage/xianyu/007.webp",
          want: "16人想要",
          priceDes: "",
          keyTagText: "",
          timeTagText: "",
          logistics: [],
          creditDes: "百分百好评",
          distance: "5.5km",
        };
      },
    },
  },
  components: {},
  setup(props) {
    const data = reactive({});
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.panel-box {
  background: #fff;
  overflow: hidden;
  image {
    width: 100%;
    display: block;
    border-radius: 10rpx;
  }
  .info-box {
    padding: 10rpx;
    position: relative;
    .distance-box {
      position: absolute;
      display: flex;
      top: -35rpx;
      left: 7rpx;
      background: #000000b2;
      font-size: 20rpx;
      color: #fff;
      border-radius: 8rpx;
      line-height: 20rpx;
      height: 20rpx;
      padding: 4rpx 8rpx;
      .icon-weibiaoti--25 {
        font-size: 18rpx;
        margin-right: 5rpx;
      }
    }
    .title {
      font-size: 26rpx;
      color: #000;
      white-space: nowrap;
      overflow: hidden;
      height: 30rpx;
      .bao-you {
        // 背景渐变
        font-weight: 700;
        margin-right: 10rpx;
        background: linear-gradient(to top, #ffd900, #fff, #fff);
      }
    }

    .tag-item {
      font-size: 22rpx;
      color: #999;
      margin: 10rpx 0;
      margin-top: 15rpx;
      &.tag-style {
        color: #ff9900;
      }
      &.fa-bu {
        padding: 2rpx;
        border-radius: 10rpx 0 0 10rpx;
        line-height: 24rpx;
        background: linear-gradient(to right, #fffbbd, #fff);
        .icon-weibiaoti--15 {
          font-size: 22rpx;
        }
      }
    }

    .logo-box {
      width: 70rpx;
      image {
        width: 100%;
      }
    }
    .price-box {
      // 文字横向底部对齐
      display: flex;
      align-items: center;
      vertical-align: bottom;
      margin-top: 10rpx;
      color: red;
      .rmb {
        font-size: 22rpx;
        font-weight: 700;
        margin-top: 10rpx;
        margin-right: 5rpx;
      }
      .price {
        font-size: 32rpx;
        font-weight: 700;
      }
      .price-des {
        font-size: 22rpx;
        margin-left: 5rpx;
        margin-top: 5rpx;
      }
      .payment-amount {
        margin-left: auto;
        color: #a7a7a7;
        font-size: 22rpx;
        margin-top: 5rpx;
      }
    }
    .other-tag {
      .tag-red {
        border: 1rpx solid rgb(255, 94, 0);
        color: rgb(255, 94, 0);
        font-size: 18rpx;
        border-radius: 6rpx;
        padding: 0 6rpx;
        margin-right: 10rpx;
      }
    }
    .seller-info {
      display: flex;
      margin-top: 10rpx;
      .user-img {
        width: 40rpx;
        height: 40rpx;
        border-radius: 20rpx;
        overflow: hidden;
        margin-right: 8rpx;
        image {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .seller-location {
        font-size: 24rpx;
        line-height: 40rpx;
        color: #999;
      }
      .seller-credit {
        margin-left: auto;
        height: 26rpx;
        font-size: 20rpx;
        padding: 4rpx 6rpx;
        color: #ff9900;
        line-height: 26rpx;
        border-radius: 10rpx;
        background: #fff4e3;
      }
    }
  }
}
</style>
